<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JiT RegEx</title>

    <script type="text/javascript">
        //<![CDATA[
        function catchEvent(eventObj, event, eventHandler) {
            if (eventObj.addEventListener) {
                eventObj.addEventListener(event, eventHandler, false);
            }
            else if (event.attachEvent) {
                event = "on" + event;
                eventObj.attachEvent(event, eventHandler);
            }
        }

        function cancelEvent(event) {
            if (event.preventDefault) {
                event.preventDefault();
                event.stopPropagation();
            }
            else {
                event.returnValue = false;
                event.cancelBubble = true;
            }
        }

        catchEvent(window, "load", setupEvents);

        function setupEvents(evnt) {
            catchEvent(document.getElementById("text2"), "blur", checkRequired);
            catchEvent(document.getElementById("text1"), "change", validateField);
        }

        function checkRequired(evnt) {
            var theEvent = evnt ? evnt : windows.event;
            var target = theEvent.target ? theEvent.target : theEvent.srcElement;

            var txtInput = target.value;
            if(txtInput == null || txtInput == "") {
                alert("value is required in field");
            }
        }

        function validateField(evnt) {
            var theEvent = evnt ? evnt : windows.event;
            var target = theEvent.target ? theEvent.target : theEvent.srcElement;
            var rgEx = /^\d{3}[-]?\d{2}[-]?\d{4}$/g;

            var OK = rgEx.exec(target.value);
            if(!OK) {
                alert("not an ssn");
            }
        }
        
        //]]>
    </script>
</head>
<body>
    <form id="someForm" action="">
        <p>
            <input type="text" id="text1" /> <br/>
            <input type="password" id="text2" /> <br/>
            <input type="hidden" name="text3" value="hidden value"/>
            <textarea id="text4" cols="50" rows="10">The text area</textarea>
            
            <input type="submit" value="Submit">
        </p>
    </form>
</body>
</html>
